// 动态获取列表高度
import {
	ref,
	computed,
	onMounted,
} from 'vue'
import {
	useAppStore
} from '@/store/app.js'

export const useListHeight = ({
	el, //列表容器class名
	hasTabBar, // 是否需要考虑底部tabbar 默认false
	hasNav, // 是否需要考虑自定义头部高度
}) => {
	const appStore = useAppStore()
	let tabbarHeight = 0
	let navTop = 0
	if (hasTabBar) tabbarHeight = 50
	if (hasNav) navTop = -appStore.headerHeight
	const listTop = ref(0)
	const listHeight = computed(() => {
		console.log('tabbarHeight', tabbarHeight, 'listTop.value', listTop.value,
			'appStore.safeBottomValue', appStore.safeBottomValue)
		return {
			height: `calc(100vh - ${listTop.value + tabbarHeight + appStore.safeBottomValue}px)`
		}
	})
	onMounted(function () {
		try {
			const query = uni.createSelectorQuery()
			setTimeout(() => {
				query.select(el).boundingClientRect(data => {
					console.log('data====', data)
					console.log('====navTop', navTop)
					listTop.value = data.top - navTop
				}).exec();
			}, 0)
		} catch (e) {
			console.log('节点获取失败', e)
		}

	})

	return {
		listHeight
	}
}